<template>
    <div class="box">
        <el-container>
            <el-header class="header">
                <div class="left">
                    <span>日期：</span>
                    <el-select style="width: 207px" v-model="value" size="mini" filterable placeholder="请选择">
                        <el-option v-for="item in options" style="height: 28px" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    &ensp;<span>影片制式：</span>
                    <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    &ensp;<span>影片属性：</span>
                    <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    &ensp;<span>影片主类型：</span>
                    <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    &ensp;<span>地区：</span>
                    <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="right">
                    <span> <input type="radio" />服务费 </span>
                    <el-button size="mini">查询</el-button>
                </div>
            </el-header>
            <el-main class="main">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="票房" name="first">票房</el-tab-pane>
                    <el-tab-pane label="场次" name="second">场次</el-tab-pane>
                    <el-tab-pane label="人次" name="third">人次</el-tab-pane>
                </el-tabs>
                <el-footer class="footer">Footer</el-footer>
            </el-main>
            <el-footer class="footer">Footer</el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: "first",
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
};
</script>
<style scoped lang="scss">
.box {
    .el-header {
        background-color: #fff;
        height: 68px;
        padding: 20px;
        line-height: 20px;
        font-size: 13px;
        display: flex;
        justify-content: space-between;

        .el-select {
            height: 28px;

            .el-input--suffix {
                height: 28px;
            }
        }

        .right {
            color: #7030a0;

            span {
                margin: 0 10px 0 0;

                input {
                    margin: 0 3px 0 0;
                }
            }
        }

        .el-button {
            background-color: #7030a0;
            color: #fff;
        }
    }

    .el-main {
        background-color: #fff;
        margin: 17px 0;

        .is-active {
            background-color: #7030a0;
        }
    }

    .el-footer {
        background-color: #fff;
    }
}
</style>